<template>
    <div class="app-container">
        <el-row>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <searchForm
                        @init=" init "
                        :searchData=" searchData "
                        :searchItem=" searchItem "
                    ></searchForm>
                </el-card>
            </el-col>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <template #header>
                        <el-button type="primary" size="small" @click="confirmAdd()">添加</el-button>
                    </template>
                    <my-table
                        :columns=" columns "
                        :showIndex=" true "
                        :data=" tableData "
                        :loading=" table_loading "
                        :pagination=" pagination "
                        :cellStyle=" { padding: '6px 0' } "
                        @currentChange=" currentChange "
                        @handleSizeChange=" handleSizeChange "
                    >
                        <template #operation=" slotProps ">
                            <el-button
                                link
                                type="primary"
                                size="small"
                                @click="handleEdit(slotProps.callback.row)"
                            >修改</el-button>
                            <el-popconfirm
                                title="确认删除？"
                                @confirm="handleDelete(slotProps.callback.row.id)"
                            >
                                <template #reference>
                                    <el-button link type="warning" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </my-table>
                </el-card>
                <el-dialog
                    :title=" dialogForm.title "
                    v-model=" dialogForm.dialogVisible "
                    :destroy-on-close=" true "
                    :close-on-click-modal=" false "
                    top="5%"
                    width="500px"
                >
                    <div>
                        <form-page
                            v-model:refObj=" formInfo.formRef "
                            :data=" formInfo.data "
                            :field-list=" formInfo.fieldList "
                            :rules=" formInfo.rules "
                            :label-width=" formInfo.labelWidth "
                            :list-type-info=" listTypeInfo "
                        ></form-page>
                    </div>
                    <template #footer>
                        <span>
                            <el-button size="small" @click="dialogForm.dialogVisible = false">取消</el-button>
                            <el-button size="small" type="primary" @click=" handleSubmit ">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="productPackage">
import myTable from "@/components/common/table.vue"
import searchForm from "@/components/common/searchForm.vue"
import formPage from "@/components/common/formPage.vue"
import {
    findMenuList, addMenu, delMenu, updateMenu,
} from "@/api/api";
import initRules from '@/utils/initRules'
import { mergeObjOfValue, deepClone } from '@/utils/index'
import { getTableData } from '@/mixins/mixins';
import { nextTick, onMounted, toRefs } from "vue";
const { proxy } = getCurrentInstance();
const columns = ref([
    {
        label: "ID",
        prop: "id"
    },

    {
        label: "菜单名称",
        prop: "name"
    },
    {
        label: "操作",
        prop: "",
        width: 120,
        align: "left",
        slot: "operation"
    }
])
const searchItem = ref([
    {
        type: "input",
        label: "菜单名称",
        prop: "name",
        placeholder: "请填写菜单名称"
    },
])
const searchData = ref({
    name: "",
})
const dialogForm = ref({
    dialogVisible: false,
    title: '新增'
})
const formInfoData = {
    id: null,
    name: "",
    sort: "",
}
const listTypeInfo = ref({
})
const formInfo = reactive({
    formRef: null,
    data: formInfoData,
    fieldList: [
        { label: '菜单名称', value: 'name', type: 'input', required: true },
        { label: '菜单排序', value: 'sort', type: 'inputNumber', min: 0, required: true },
    ],
    rules: {},
    labelWidth: '110px'
})
const { data, fieldList, rules, formRef } = toRefs(formInfo)
//hook
const {
    tableData,
    pagination,
    table_loading,
    init,
    handleSizeChange,
    handleDelete,
    currentChange,
} = getTableData(findMenuList,delMenu)
// 生成表单验证
function handleInitRules () {
    rules.value = initRules(fieldList.value)
}
// 新增
function confirmAdd () {
    mergeObjOfValue(data.value, formInfoData)
    dialogForm.value.title = '新增'
    dialogForm.value.dialogVisible = true
}
// 修改
function handleEdit (rowData) {
    mergeObjOfValue(data.value, rowData)
    data.value.content = ''
    dialogForm.value.title = '修改'
    dialogForm.value.dialogVisible = true
}

// 提交
function handleSubmit () {
    formRef.value.validate((valid) => {
        if (valid) {
            if (dialogForm.value.title == '新增') {
                addMenu(data.value)
                    .then((res) => {
                        proxy.$modal.msgSuccess('新增成功')
                        dialogForm.value.dialogVisible = false
                        init()
                    })
                    .finally(() => { })
            } else {
                updateMenu(data.value)
                    .then((res) => {
                        proxy.$modal.msgSuccess('修改成功')
                        dialogForm.value.dialogVisible = false
                        init()
                    })
                    .finally(() => { })
            }
        }
    })
}

onMounted(async () => {
    data.value = deepClone(formInfoData)
    handleInitRules()
    init()
})
</script>
